<template>
	<scroll-view scroll-y class="container" >
		<u-loading-page :loading="loadingshow"></u-loading-page>
				<view class="content-wrap">
					<view class="content-item">
						<view class="goods" v-for="(item,index) in list" :key="index">
							<label @click="danxuan(index)" :class="item.checked?'act':''"><text class="iconfont icon-danxuan-weixuan"></text></label>
							<view class="good">
								<view class="img-wrapper">
									<image :src="item.img" mode=""></image>
								</view>
								<view class="good-content">
									<view class="good-title text-line">{{item.name}}</view>
									<view class="spec">
										<view class="spec1"><text class="name ellipsis">{{item.attr}}</text></view>
									</view>
									<view class="good-desc">
										<view class="good-price">
											<text>￥</text>
											{{item.price}}
										</view>
										<number-box :index="index" :min="0" :value="item.num" :source="'cart'" :max="999"
											:step="1" @change="numberChange">
										</number-box>
				
									</view>
								</view>
							</view>
				
						</view>
					</view>
				</view>
				<!-- <u-popup :show="show" mode="center">
				        <view>
				            <text>提示</text>
							<text>您将移除本商品，是否确定？</text>
							<view class="">
								<button>取消</button>
								<button>确认</button>
							</view>
				        </view>
					</u-popup> -->
				<view>
					<u-modal @cancel="qx" @confirm="remove_cart" :showCancelButton=true :show="show" :title="title"
						:content='content'></u-modal>
				</view>
				<view class="total-wrap" v-if="list.length>=1">
					<view class="total-left">
						<label @click="quanxuan" :class="allChecked?'act':''">
							<text class="iconfont icon-danxuan-weixuan"></text>
							全选
						</label>
				
						<view class="total-con">
							<view class="top-con">
								合计:
								<text class="symbol">￥</text>
								<text class="total">{{totalPrice}}</text>
							</view>
						</view>
					</view>
				
					<view class="total-right" @click="submit">购买</view>
			</view>

		
	</scroll-view>
</template>

<script>
	import numberBox from '@/components/numberbox/numberbox.vue';
	import BigNumber from 'bignumber.js';
	import {
		change_cart_num,
		get_cart_list,
		remove_cart,
		toggle_check_cart,
		cancel_cart,
		check_cart
	} from "@/api/index.js"
	export default {
		components: {
			numberBox
		},
		data() {
			return {
				list: [],
				show: false,
				title: '提示',
				content: '您将移除本商品,是否确定?',
				_id: '',
				shanchu: 0,
				loadingshow:false
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.cart_list()
		},
		computed: {
			// uid() {
			// 	return this.$store.state.uid
			// }
			allChecked() {
				// 判断是不是全选选项都打勾了
				return this.list.every(v => v.checked);
			},
			totalPrice(){
				if(this.list.length<=0) return
				// return this.list.reduce((current, v) => {
				// 	if (v.checked) {
				// 		current = new BigNumber(v.price).times(v.num).plus(current);
				// 		current = current.toString() - 0;
				// 	}
				// 	return current;
				// }, 0);
				let arr = 0
				this.list.forEach(v=>{
					if(v.checked){
						arr=new BigNumber(v.price).times(v.num).plus(arr)
						// arr = v.price*v.num
					}
				})
				return arr
			}
		},
		methods: {
			//购买
			submit(){
				let cart_id=[]
				this.list.forEach(v=>{
					if(v.checked){
						cart_id.push(v._id)
						
					}
				})
				cart_id.join()
				// console.log(cart_id)
				uni.navigateTo({
					url:`/pages/order/createOrder?type=${'cart'}&cart_id=${cart_id}`,
				})
			},
			danxuan(index){
				let checked = this.list[index].checked;
				let _id = this.list[index]._id;
				// 购物车选中/取消选中
				toggle_check_cart({checked,_id}).then(res=>{
					console.log(res)
				})
				this.list[index].checked= !checked
			},
			quanxuan(){
				let allChecked=this.allChecked
				if(allChecked){
					let _id = this.list.map(v=>v._id)
					cancel_cart({_id}).then(res=>{
						console.log(res)
					})
				}else{
					let _id = this.list.map(v=>v._id)
					check_cart({_id}).then(res=>{
						console.log(res)
					})
				}
				this.list.forEach(v=>{
					v.checked=!allChecked
				})
				
			},
			qx() {
				this.show = false
			},
			//移除购物车
			remove_cart() {
				let {
					_id,
					shanchu
				} = this
				remove_cart({
					_id
				}).then(res => {
					// console.log(res)
					
				})
				this.list.splice(shanchu, 1)
				this.show = false
			},
			//加减购物车
			numberChange(e) {
				console.log(e)
				// this.num = e.value
				if (e.type == 'reduce' && e.value == 0) {
					// this.$u.toast('')
					// console.log(123)
					this.show = true
					this._id = this.list[e.index]._id
					this.shanchu = e.index
				}
				
				let _id = this.list[e.index]._id
				let num = e.value
				if(e.value==0){
					return
				}
				change_cart_num({
					_id,
					num
				}).then(res => {
					// console.log(res)
					if(res.code==1){
						this.list[e.index].num = e.value
					}
				})

			},
			// 获取购物车
			cart_list() {
				// let uid = this.$store.state.uid
				let uid = uni.getStorageSync('uid')
				// let {
				// 	uid
				// } = this
				get_cart_list({
					uid
				}).then(res => {
					if(res.code==1){
						console.log(res)
						this.list = res.data
						this.loadingshow=false
					}
					
					
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.fff{
		background: #fff;
	}
	.car{
		display: flex;
		// margin-top: 30%;
		    flex-direction: column;
		    align-items: center;
			img{
				width: 100%;
			}
		text{
			margin-top: 15px;
			color: #FDD100;
		}
	}
	page {
		width: 100%;
		height: calc(100% - 110upx);
		background: #f5f5f5;

		.container {
			width: 100%;
			height: 100%;
			overflow: hidden;
			// background: #fff;
			.header {
				position: relative;
				width: 100%;
				height: 360upx;
				background: #fc7827;
				background-size: cover;
				overflow: hidden;
				/*  #ifndef  APP-PLUS  */
				height: 280upx;
				background-size: 100% 100%;

				/*  #endif  */
				.title-contents {
					position: fixed;
					top: 0;
					width: 100%;
					height: calc(var(--status-bar-height) + 88upx);
					z-index: 100008;

					.top-view {
						width: 100%;
						height: var(--status-bar-height);
						background: #fc7827;
					}

					.titles {
						display: flex;
						flex-direction: row;
						height: 88upx;
						background: #fc7827;

						.titleLeftButton {
							width: 88upx;
							height: 88upx;
							line-height: 88upx;
							text-align: center;

							image {
								width: 40upx;
								height: 40upx;
							}
						}

						.titleText {
							width: 574upx;
							line-height: 88upx;
							text-align: center;
							font-size: 36upx;
							color: #fff;
						}

						.titleRightButton {
							width: 88upx;
							height: 88upx;
							line-height: 88upx;
							text-align: center;
							font-size: 32upx;
							color: #fff;
						}
					}
				}
			}

			.content-wrap {
				margin-top: 20upx;
				margin-left: 24upx;
				width: 702upx;

				//
				.content-item {
					margin-bottom: 20upx;
					border-radius: 20upx;
					background: #fff;
				}

				.goods {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20upx;

					&:last-child {
						margin-top: 0;
					}

					label {
						margin-left: 20upx;
						line-height: 214upx;

						.iconfont {
							font-size: 46upx;
							color: #bbb;
						}

						&.act .iconfont {
							color: $theme-color;

							&::before {
								content: '\e617';
							}
						}
					}

					.good {
						display: flex;
						justify-content: space-between;
						width: 624upx;
						padding: 20upx 0 0;
						box-sizing: border-box;
						border-bottom: 1px solid #eee;

						.img-wrapper {
							width: 180upx;
							height: 180upx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.good-content {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							width: 440upx;
							height: 180upx;
							padding: 0 20upx;
							box-sizing: border-box;

							.good-title {
								font-size: 28upx;
								color: #111;
							}

							.spec {
								display: flex;
								flex-direction: row;

								.spec1 {
									display: flex;
									flex-direction: row;
									align-items: center;
									padding: 0 16upx;
									box-sizing: border-box;
									width: 100%;
									height: 40upx;
									border-radius: 8upx;
									//

									.name {
										display: inline-block;
										// width: 85%;
										padding: 0 15upx;
										line-height: 40upx;
										font-size: 24upx;
										color: #666;
										background: #f6f6f6;
									}

									.iconfont {
										color: #999;
									}
								}
							}

							.good-desc {
								display: flex;
								justify-content: space-between;

								.good-price {
									line-height: 38upx;
									color: #fb5248;
									font-size: 30upx;
								}
							}
						}
					}
				}
			}

			.total-wrap {
				position: fixed;
				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 100upx;
				line-height: 100upx;
				background: #fff;
				z-index: 9;
				/*  #ifndef  H5  */
				bottom: 0px;
				/*  #endif  */
				/*  #ifdef  H5  */
				bottom: 50px;
				/*  #endif  */

				.total-left {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding-left: 20upx;
					width: 490upx;
					height: 100%;
					color: #333;
					box-sizing: border-box;

					label {
						font-size: 28upx;
						display: flex;
						align-items: center;

						.iconfont {
							font-size: 46upx;
							color: #bbb;
							margin-right: 5px;
						}

						&.act .iconfont {
							color: $theme-color;

							&::before {
								content: '\e617';
							}
						}
					}

					.total-con {
						display: flex;
						flex-direction: column;
						margin-right: 20upx;

						.top-con {
							display: flex;
							flex-direction: row;
							line-height: 100upx;
							font-size: 30upx;
							color: #333;

							.freight {
								margin-right: 16upx;
								font-size: 22upx;
								color: #999;
							}

							.symbol {
								font-size: 24upx;
								color: #fc511f;
							}

							.total {
								color: #fc511f;
							}
						}

						.bottom-con {
							display: flex;
							flex-direction: row;
							line-height: 36upx;
							font-size: 22upx;

							.discounts {
								color: #fb5248;
								margin-right: 16upx;
							}

							.detail {
								color: #666;
							}

							.iconfont {
								font-size: 14px;
							}
						}
					}
				}

				.total-right {
					width: 200upx;
					height: 80upx;
					line-height: 80upx;
					margin-top: 10upx;
					margin-right: 20upx;
					background: #fc511f;
					color: #fff;
					text-align: center;
					font-size: 28upx;
					border-radius: 40upx;
				}
			}

			.mask {
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 10009;
			}

			.mask-content {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				height: 510upx;
				background: #fff;
				z-index: 10009;

				.head {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					padding: 0 25upx;
					box-sizing: border-box;
					height: 110upx;

					.title {
						position: relative;
						padding-left: 20upx;
						box-sizing: border-box;
						line-height: 110upx;
						font-size: 32upx;
						color: #010101;
						font-weight: bold;

						&::before {
							position: absolute;
							left: 0;
							top: 40upx;
							content: ' ';
							width: 6upx;
							height: 30upx;
							background: blue;
						}

						text {
							margin-left: 20upx;
							font-weight: normal;
							font-size: 24upx;
							color: #666;
						}
					}

					image {
						width: 30upx;
						height: 30upx;
					}
				}

				.holder {
					color: #999;
				}

				.list {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin: 0 auto;
					width: 700upx;
					height: 70upx;

					// border-bottom: 1px solid #eee;
					text {
						font-size: 28upx;
						color: blue;

						text {
							margin-left: 20upx;
							font-size: 24upx;
							color: #666;
						}
					}
				}

				.footer {
					position: absolute;
					bottom: 0;
					width: 100%;
					line-height: 94upx;
					color: blue;
					background: blue;
					text-align: center;
					font-size: 34upx;
				}
			}
		}
	}
</style>
